<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="/plugins/sweetalert2/sweetalert2.min.css">
    <!-- 自写主界面代码 -->
    <link rel="stylesheet" href="/my_works/css/admin_main.css">
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>

<body>
    <!--修改学生信息的模态框-->
    <div class="modal fade" id="updateStudentModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改学生信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formUpdateStudent">
                        <input type="text" hidden="hidden" id="update-id" name="id">
                        <div class="form-group">
                            <label for="add-password">密码</label>
                            <input type="password" class="form-control" id="update-password" placeholder="输入密码"
                                name="password">
                        </div>
                        <div class="form-group">
                            <label for="update-email">邮箱</label>
                            <input type="password" class="form-control" id="update-email" placeholder="输入邮箱"
                                name="email">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="updateConfirm">确认修改</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row Container">
        <div class="col-md-12">
            <h2 style="text-align: center;">我的个人信息</h2>
        </div>
        <div class="col-md-12">
            <form class="form-inline">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">属性</th>
                            <th scope="col">值</th>
                            <th scope="col">操作</th>

                        </tr>
                    </thead>
                    <tbody id="mydataTableBody">
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Mark</td>

                        </tr>
                    </tbody>
                </table>
            </form>
        </div>


    </div>




    <!-- jQuery -->
    <script src="/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/dist/js/adminlte.min.js"></script>
    <script src="/plugins/bootstraptable/bootstrap-table.js"></script>
    <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
    <script src="/plugins/toastr/toastr.min.js"></script>
    <script src="/plugins/sweetalert2/sweetalert2.min.js"></script>
    <!-- 引入axios -->
    <script src="/plugins/axios/axios.min.js"></script>
    <!-- 引入自写js -->
    <script src="/my_works/js/teacher_manage.js"></script>
    <script src="/my_works/common/common.js"></script>
    <script>
        loadMyData = () => {
            $("#mydataTableBody").empty()
            axios({
                url: "/api/student/getOne?id=" + localStorage.getItem("id"),
            }).then((res) => {
                let data = res.data.data;
                //对数据进行修改
                $("#mydataTableBody").empty()

                let model = "<tr>"
                    + "<td>Mark</td>"
                    + "<td>Bark</td>"
                    + "<td>  </td>"
                    + "</tr>"
                ""
                let html = "";
                html += model.replace("Mark", "学号").replace("Bark", data.no);
                html += model.replace("Mark", "邮箱").replace("Bark", data.email).replace("  ", "<button type='button' class='btn btn-primary' onclick='updateStudent(" + data.id + ")'>修改</button>")
                html += model.replace("Mark", "姓名").replace("Bark", data.name);
                html += model.replace("Mark", "年龄").replace("Bark", data.age).replace("  ", "<button type='button' class='btn btn-primary' onclick='updateStudent(" + data.id + ")'>修改</button>")
                if (data.sex == 1) {
                    html += model.replace("Mark", "性别").replace("Bark", "男");//email
                } else {
                    html += model.replace("Mark", "性别").replace("Bark", "女");//email
                }
                $("#mydataTableBody").html(html);

            })
        }
        main = () => {
            const my_id = localStorage.getItem("id");
            const my_no = localStorage.getItem("no");
            loadMyData()

        }
        main()





        //    以下部分为所需的函数
        //更新学生信息
        updateStudent = (id) => {
            axios({
                url: "/api/student/getOne?id=" + id,
                method: "GET",

            }).then((res) => {

                let data = res.data.data;
                // console.log(data);

                //调用模态框
                $("#updateStudentModal").modal("show")
                //设置参数
                $("#update-id").val(data.id)
                // console.log(data.id);
                $("#update-name").val(data.name)
                $("#update-no").val(data.no)
                $("#update-sex").val(data.sex)
                $("#update-age").val(data.age)
                $("#updateConfirm").click(() => {
                    //获取所需的值
                    let data = $("#formUpdateStudent").serializeArray()
                    let o = {};
                    data.forEach(element => {
                        o[element.name] = element.value;
                    });

                    axios({
                        url: "/api/student",
                        method: "PUT",
                        data: JSON.stringify(o),
                        // headers: { 'content-type': 'application/json;charset=UTF-8' }
                    }).then(() => {
                        successInfo("修改信息成功")
                        $("#updateStudentModal").modal("hide");
                        loadMyData()
                    })

                })
            })
        }
    </script>
</body>

</html>